var SHAPE,COLOUR,R,G,B,loc,brS,brH;

function setup() {
	
	var canvas=createCanvas(640, 640);
	canvas.parent('draw_panel');
	smooth();


	//FRAME
	fill(255);
	stroke(125);
	strokeWeight(3);
	rect(0,0,width,height);
	strokeWeight(1);
	noFill();
	rect(0,0,505,505);

	//BRUSH_SIZE
	stroke(125);
	strokeWeight(3);
	line(50,600,250,600);
	loc=70;
	rectMode(CENTER);
	noStroke();
	fill(125);
	rect(loc,600,10,20);
	textSize(10); 
	fill(0);
	noStroke();
	brS=map(loc-50,0,200,0,45);
	text(ceil(brS)+" pixel", 275, 600);

	//BRUSH_HARDNESS
	stroke(125);
	strokeWeight(3);
	line(50,530,250,530);
	loc=90;
	rectMode(CENTER);
	noStroke();
	fill(125);
	rect(loc,530,10,20);
	textSize(10); 
	fill(0);
	noStroke();
	brH=map(loc-50,0,200,0,255);
	text(ceil(brH)+" deep", 275, 530);

	//SAVE_IMAGE
	stroke(80);
	strokeWeight(1);
	line(579,115,579,132);
	line(579,132,574,128);
	line(579,132,584,128);
	noFill();
	rectMode(CORNER);
	rect(561,115,36,40);
	textSize(5); 
	fill(80);
	noStroke();
	text("SAVE", 568, 148);


	//CLR
	textSize(5); 
	fill(80);
	noStroke();
	text("CLEAR", 565, 57);
	stroke(80);
	strokeWeight(1);
	noFill();
	rectMode(CORNER);
	rect(558,43,42,20);
	

	//COLOUR BOXES
	stroke(0);
	strokeWeight(1);
	rectMode(CORNER);

	fill(255);
	rect(490,600,20,20);//white

	fill(0,90);
	rect(515,600,20,20);//black

	fill(200,5,5,90);
	rect(540,600,20,20);//red

	fill(5,200,5,90);
	rect(565,600,20,20);//green

	fill(5,5,200,90);
	rect(590,600,20,20);//blue

	//DEFAULT SETTINGS
	SHAPE=true;
	R=0;
	G=0;
	B=0;
}



function draw() {
	if(SHAPE==true){
		//Brush ellipse
		noStroke();
		fill(0,90);
    	ellipseMode(CENTER);
		ellipse(580,250,45,45);
		fill(200,90);
		rectMode(CENTER);
		rect(580,380,40,40);
	}
	else{
		//Brush rectangle
		noStroke();
		fill(200,90);
    	ellipseMode(CENTER);
		ellipse(580,250,45,45);
		fill(0,90);
		rectMode(CENTER);
		rect(580,380,40,40);
	}

	if(mouseIsPressed&&(mouseX>=558&&mouseX<=620)&&(mouseY>=43&&mouseY<=63)){

    	fill(255);
    	noStroke();
    	rect(0,0,545,545);
		stroke(125);
		strokeWeight(1);
		rectMode(CORNER);
		rect(0,0,505,505);
		//rect(5,5,500,500);
	}
	
	//SET BRUSH SIZE	
	if(mouseIsPressed&&(mouseX>=50&&mouseX<=250)&&(mouseY>=590&&mouseY<=610)){
		rectMode(CORNER);
		fill(255);
		rect(40,550,300,65);
		stroke(125);
		strokeWeight(3);
		line(50,600,250,600);
		loc=mouseX;
		brS=map(loc-50,0,200,5,45);
		rectMode(CENTER);
		fill(125);
		rect(loc,600,10,20);
		textSize(10); 
		fill(0);
		noStroke();
		text(ceil(brS)+" pixel", 275, 600);
	}

	//SET BRUSH HARDNESS
	if(mouseIsPressed&&(mouseX>=50&&mouseX<=250)&&(mouseY>=520&&mouseY<=540)){
		rectMode(CORNER);
		fill(255);
		rect(40,510,300,65);
		stroke(125);
		strokeWeight(3);
		line(50,530,250,530);
		loc=mouseX;
		brH=map(loc-50,0,200,0,255);
		rectMode(CENTER);
		fill(125);
		rect(loc,530,10,20);
		textSize(10); 
		fill(0);
		noStroke();
		text(ceil(brH)+" deep", 275, 530);
	}

	if(mouseIsPressed&&(mouseX>535&&mouseX<625)&&(mouseY>205&&mouseY<295))
		SHAPE=true;

	if(mouseIsPressed&&(mouseX>540&&mouseX<620)&&(mouseY>340&&mouseY<420))
		SHAPE=false;

	if(mouseIsPressed&&(mouseX>=490&&mouseX<=510)&&(mouseY>=600&&mouseY<=620)){
		R=255;G=255;B=255;

		fill(255);
		noStroke();
		rectMode(CORNER);
		rect(480,580,150,45);

		stroke(0);
		strokeWeight(4);
		rectMode(CORNER);

		fill(255);
		rect(490,600,20,20);

		stroke(0);
		strokeWeight(1);
		rectMode(CORNER);

		fill(0,90);
		rect(515,600,20,20);

		fill(200,5,5,90);
		rect(540,600,20,20);

		fill(5,200,5,90);
		rect(565,600,20,20);

		fill(5,5,200,90);
		rect(590,600,20,20);

	}

	if(mouseIsPressed&&(mouseX>=515&&mouseX<=535)&&(mouseY>=600&&mouseY<=620)){
		R=0;G=0;B=0;

		fill(255);
		noStroke();
		rectMode(CORNER);
		rect(480,580,150,45);

		stroke(R,G,B);
		strokeWeight(4);
		rectMode(CORNER);

		fill(0,90);
		rect(515,600,20,20);

		stroke(0);
		strokeWeight(1);
		rectMode(CORNER);

		fill(255);
		rect(490,600,20,20);

		fill(200,5,5,90);
		rect(540,600,20,20);

		fill(5,200,5,90);
		rect(565,600,20,20);

		fill(5,5,200,90);
		rect(590,600,20,20);


	}

	if(mouseIsPressed&&(mouseX>=540&&mouseX<=560)&&(mouseY>=600&&mouseY<=620)){
		R=200;G=5;B=5;

		fill(255);
		noStroke();
		rectMode(CORNER);
		rect(480,580,150,45);

		stroke(R,G,B);
		strokeWeight(4);
		rectMode(CORNER);

		fill(200,5,5,90);
		rect(540,600,20,20);

		stroke(0);
		strokeWeight(1);
		rectMode(CORNER);

		fill(255);
		rect(490,600,20,20);

		fill(0,90);
		rect(515,600,20,20);

		fill(5,200,5,90);
		rect(565,600,20,20);

		fill(5,5,200,90);
		rect(590,600,20,20);


	}

	if(mouseIsPressed&&(mouseX>=565&&mouseX<=585)&&(mouseY>=600&&mouseY<=620)){
		R=5;G=200;B=5;

		fill(255);
		noStroke();
		rectMode(CORNER);
		rect(480,580,150,45);

		stroke(R,G,B);
		strokeWeight(4);
		rectMode(CORNER);

		fill(5,200,5,90);
		rect(565,600,20,20);

		stroke(0);
		strokeWeight(1);
		rectMode(CORNER);

		fill(255);
		rect(490,600,20,20);

		fill(0,90);
		rect(515,600,20,20);

		fill(200,5,5,90);
		rect(540,600,20,20);


		fill(5,5,200,90);
		rect(590,600,20,20);


	}

	if(mouseIsPressed&&(mouseX>=580&&mouseX<=600)&&(mouseY>=600&&mouseY<=620)){
		R=5;G=5;B=200;

		fill(255);
		noStroke();
		rectMode(CORNER);
		rect(480,580,150,45);

		stroke(R,G,B);
		strokeWeight(4);
		rectMode(CORNER);

		fill(5,5,200,90);
		rect(590,600,20,20);

		stroke(0);
		strokeWeight(1);
		rectMode(CORNER);

		fill(255);
		rect(490,600,20,20);

		fill(0,90);
		rect(515,600,20,20);

		fill(200,5,5,90);
		rect(540,600,20,20);

		fill(5,200,5,90);
		rect(565,600,20,20);

	}


  	if(mouseIsPressed&&SHAPE==true&&(mouseX>5&&mouseX<495)&&(mouseY>5&&mouseY<495)){
    	radius=random(5,30);
    	fill(R,G,B,brH);
    	noStroke();
    	ellipse(mouseX, mouseY, brS, brS);
  	} 

  	if(mouseIsPressed&&SHAPE==false&&(mouseX>5&&mouseX<495)&&(mouseY>5&&mouseY<495)){
    	radius=random(5,30);
    	fill(R,G,B,brH);
    	noStroke();
    	rect(mouseX, mouseY, brS, brS);
  	} 

  	if(mouseIsPressed&&(mouseX>=561&&mouseX<=598)&&(mouseY>=115&&mouseY<=155)){
  		saveCanvas();
  	}
 
}